<template>
	<div class="self-appoint">
		<el-timeline>
			<el-timeline-item v-for="item in allParticipants" :key="item.id" v-bind="nodalType(item)">
				<div class="title">
					{{ item.nodeName }}
					<div class="tip">{{ item.nodeDesc }}</div>
					<el-tag type="info" size="small" class="tag" v-if="item.approveType">{{ item.approveType || "" }}</el-tag>
				</div>

				<v-user :nodeTypeName="item.nodeTypeName" @showAnnexes="onShowAnnexes" :message="item.user"></v-user>
				<template v-if="item.users">
					<v-user
						:nodeTypeName="item.nodeTypeName"
						@showAnnexes="onShowAnnexes"
						:message="user"
						v-for="user in item.users"
						:key="user.id"
					></v-user>
				</template>
				<template v-if="item.userGroup">
					<template v-for="user in item.userGroup">
						<v-user
							:nodeTypeName="item.nodeTypeName"
							@showAnnexes="onShowAnnexes"
							v-for="(items, indexs) in user"
							:key="indexs"
							:message="items"
						></v-user>
					</template>
				</template>

				<v-auditer
					v-if="(item.approveAppointVar || item.nodeTypeName === 'CS') && !readonly"
					v-model="formData[item.approveAppointVar || item.nodeId]"
					disDept
					:multiple="item.nodeUserType === '01'"
					authFlag="00"
					:disabled="
						disabled !== undefined
							? disabled
							: item.nodeTypeName === 'CS'
							? !![item.user ? item.user.id : '', ...(item.users ? item.users.map(item => item.id) : [])].join()
							: false
					"
				>
					<template #default="{ names, list, open, disabled }">
						<div v-if="item.nodeUserType === '01'">
							<el-card class="list" v-for="({ name }, index) in list" :key="index">
								<el-descriptions :column="1" border>
									<el-descriptions-item hide-timestamp content-class-name="el-descriptions-item-content">
										<template slot="label">
											<div class="el-descriptions-item-label">
												<i class="el-icon-user"></i>
												办理人
											</div>
										</template>
										{{ name }}
									</el-descriptions-item>
								</el-descriptions>
							</el-card>
						</div>
						<div v-else-if="names">
							<el-card class="list">
								<el-descriptions :column="1" border>
									<el-descriptions-item hide-timestamp content-class-name="el-descriptions-item-content">
										<template slot="label">
											<div class="el-descriptions-item-label">
												<i class="el-icon-user"></i>
												办理人
											</div>
										</template>
										{{ names }}
									</el-descriptions-item>
								</el-descriptions>
							</el-card>
						</div>
						<el-button type="primary" :disabled="disabled" icon="el-icon-plus" class="s-auditer" @click="open">
							编辑人员
						</el-button>
					</template>
				</v-auditer>
			</el-timeline-item>
		</el-timeline>

		<!-- <div class="all-participants" v-for="item in allParticipants" :key="item.id">
			<div class="title">
				<div class="dot"></div>
				<div class="node-name">{{ item.nodeName }}</div>
				<div class="tip">{{ item.nodeDesc }}</div>
				<div class="tag">{{ item.approveType || "" }}</div>
			</div>
			<div class="all-participants-content">
				<v-user @showAnnexes="onShowAnnexes" :message="item.user"></v-user>
				<template v-if="item.users">
					<v-user @showAnnexes="onShowAnnexes" :message="user" v-for="user in item.users" :key="user.id"></v-user>
				</template>
				<template v-if="item.userGroup">
					<template v-for="user in item.userGroup">
						<v-user @showAnnexes="onShowAnnexes" v-for="(items, indexs) in user" :key="indexs" :message="items"></v-user>
					</template>
				</template>

				<v-auditer
					v-if="(item.approveAppointVar || item.nodeTypeName === 'CS') && !readonly"
					v-model="formData[item.approveAppointVar || item.nodeId]"
					disDept
					:multiple="item.nodeUserType === '01'"
					authFlag="00"
					:disabled="
						item.nodeTypeName === 'CS'
							? !![item.user ? item.user.id : '', ...(item.users ? item.users.map(item => item.id) : [])].join()
							: false
					"
				>
					<template #default="{ names, list, open }">
						<div v-if="item.nodeUserType === '01'">
							<div class="list" v-for="({ name }, index) in list" :key="index">
								<div class="name">
									<div class="avatar">
										{{ formatUsername(name) }}
									</div>
									{{ name }}
								</div>
							</div>
						</div>
						<div class="list" v-else-if="names">
							<div class="name">
								<div class="avatar">
									{{ formatUsername(names) }}
								</div>
								{{ names }}
							</div>
						</div>

						<div class="s-auditer" @click="open"></div>
					</template>
				</v-auditer>
			</div>
		</div> -->

		<el-dialog :visible.sync="visible" title="查看附件">
			<div class="image-list" v-if="showMessage.image">
				<el-image
					v-for="(item, index) in showMessage.images"
					:preview-src-list="showMessage.images"
					:initial-index="index"
					:key="index"
					:src="item"
					class="el-image"
				></el-image>
			</div>
			<br />

			<div class="file-list" v-if="showMessage.file">
				<div class="file-item" v-for="(item, index) in showMessage.files" :key="index" @click="onPreviewFIle(item)">
					{{ item.name }}
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import request from "@/common/request"
import VUser from "./user.vue"
const baseUrl = process.env.VUE_APP_ROOT_URL_ENV

export default {
	name: "self-appoint",
	model: {
		prop: "modelValue",
		event: "update:value",
	},
	props: {
		modelValue: {},
		actKey: {
			default: "",
		},
		fid: {
			default: "",
		},
		engineVersion: {
			default: "",
		},
		pid: {
			default: "",
		},
		readonly: {
			type: Boolean,
			default: false,
		},
		request: {
			type: Boolean,
			default: false,
		},
		disabled: {
			type: Boolean,
		},
	},
	data() {
		return {
			allParticipants: [],
			formData: {},
			visible: false,
			showMessage: {},
		}
	},
	computed: {},
	created() {
		if (this.fid || this.actKey) {
			this.getData()
		}
	},
	methods: {
		onShowAnnexes(message) {
			this.showMessage = {
				...message,
				images: message.image && message.image != "" ? message.image.split(",") : [],
				files: message.file && message.file != "" ? JSON.parse(message.file) : [],
			}
			this.visible = true
		},
		onPreviewFIle(item) {
			window.open(item.url)
		},
		async getData() {
			if (this.request) {
				const query = {
					pid: this.pid,
				}
				if (this.actKey) {
					query.actKey = this.actKey
				}
				if (this.fid) {
					query.fid = this.fid
				}
				if (this.engineVersion) {
					query.engineVersion = this.engineVersion
				}
				try {
					const { code, data } = await request("get", "/flowable/approves/allParticipants", query)

					if (code == 0) {
						this.setData(data)
					}
				} catch (error) {
					this.$message.error("获取审批人失败")
				}
				return
			}
			try {
				const {
					data: { code, data },
				} = await this.$axios({
					method: "get",
					url: `${baseUrl}flowable/approves/allParticipants?fid=${this.fid}`,
					headers: {
						Authorization: "Bearer " + localStorage.getItem("token") || "",
					},
				})
				if (code == 0) {
					this.setData(data)
				}
			} catch (error) {
				this.$message.error("获取审批人失败")
			}
		},
		setData(data) {
			const formData = {}
			for (let i = 0; i < data.length; i++) {
				const item = data[i]
				if (!item.approveAppointVar) {
					continue
				}
				const user = []

				if (item.user && +item.user.id > 0) {
					user.push(item.user.id)
				} else if (Array.isArray(item.users)) {
					item.users.forEach(item => {
						if (+item.id > 0) {
							user.push(item.id)
						}
					})
				}

				formData[item.approveAppointVar] = {
					dept: [],
					user,
				}
			}

			this.formData = formData
			this.allParticipants = data
		},

		formatUsername: name => (name ? name.slice(0, 2) : ""),
		nodalType(item) {
			if (item.user) {
				if (item.user.approveStatus == "02") {
					return { type: "success", icon: "el-icon-check" }
				} else if (item.user.approveStatus == "03") {
					return { type: "error", icon: "el-icon-close" }
				}
			}
			if (item.users) {
				for (let i = 0; i < item.users.length; i++) {
					if (item.users[i].approveStatus == "02") {
						return { type: "success", icon: "el-icon-check" }
					} else if (item.users[i].approveStatus == "03") {
						return { type: "error", icon: "el-icon-close" }
					}
				}
			}
			if (item.userGroup) {
				for (let i = 0; i < item.userGroup.length; i++) {
					for (let j = 0; j < item.userGroup[i].length; j++) {
						if (item.userGroup[i][j].approveStatus == "02") {
							return { type: "success", icon: "el-icon-check" }
						} else if (item.userGroup[i][j].approveStatus == "03") {
							return { type: "error", icon: "el-icon-close" }
						}
					}
				}
			}

			return ""
		},
	},
	watch: {
		formData: {
			deep: true,
			handler(val) {
				// Object.keys(value).map(key => {
				// 	let data = value[key].user
				// 		.map(item => {
				// 			if (typeof item === "string") {
				// 				return item
				// 			}
				// 			return item.id
				// 		})
				// 		.join()
				// 	const { nodeUserType } = this.allParticipants.find(item => item.approveAppointVar === key || item.nodeId === key)
				// 	if (nodeUserType === "01") {
				// 		if (value[key].user.length === 1) {
				// 			data = data + ","
				// 		}
				// 	}
				// 	formData[key] = data
				// })

				const formData = {}
				Object.entries(val).map(([key, { user }]) => {
					formData[key] = user.join()

					const { nodeUserType } = this.allParticipants.find(item => item.approveAppointVar === key || item.nodeId === key)
					if (nodeUserType === "01") {
						if (user.length === 1) {
							formData[key] += ","
						}
					}
				})

				this.$emit("update:value", formData)
			},
		},
	},
	components: { VUser },
}
</script>

<style lang="scss" scoped>
$color: #409eff;

.image-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	.el-image {
		width: 100px;
		height: 100px;
		border-radius: 15px;
		cursor: pointer;
	}
}
.file-list {
	.file-item {
		cursor: pointer;
		border: 1px solid #f5f5f5;
		border-radius: 5px;
		padding: 5px 10px;
		margin-bottom: 10px;
		&:hover {
			background: #f5f5f5;
		}
	}
}

.self-appoint {
	.title {
		font-weight: 700;
		font-size: 18px;
		margin-bottom: 20px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		gap: 10px;
		.tip {
			font-size: 14px;
			color: #999;
			font-weight: 500;
		}
		.tag {
			font-weight: 500;
		}
	}
	.list {
		margin-top: 20px;
	}
}
.s-auditer {
	margin-top: 20px;
}
</style>
